<template>
  <div class="edit">
    <!-- 顶部导航 -->
    <van-nav-bar fixed class="topbar"
      title="编辑收货地址"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <ul>
        <li>
        <div class="block">
          <!-- 在添加地址后记得在addresslist后面加[currentIndex] -->
          <span>联系人:</span> <input type="text" v-model="addresslist[this.currentIndex].name">
        </div>
        <button>先生</button><button>女士</button>
        <div class="block">
          <span>电话:</span> <input type="text" v-model="addresslist[this.currentIndex].phone">
        </div>
         <div class="block">
          <span>地址:</span> <input type="text" v-model="addresslist[this.currentIndex].address">
        </div>
         <button>家</button><button>学校</button><button>公司</button>

        </li>
    </ul>
    <div style="margin: 16px;">
    <van-button type="danger" class="del" @click="clear">删除</van-button>
    <van-button type="primary" class="srue" @click="save">确定</van-button>
  </div>
  </div>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import eventbus from '../utils/tools';
import { Dialog } from 'vant';
export default {
    data(){
        return{
          currentIndex:0,
        
        }
    },
    components: {
    [Dialog.Component.name]: Dialog.Component,
    },
    computed:{
        ...mapState(['addresslist']),
    },
    methods:{
        ...mapActions(['request_addresslist_add','request_addresslist_clear']),
        clear(){
          console.log(this.addresslist[this.currentIndex].id);
          Dialog.confirm({
          title: '删除地址',
          message: '确定删除收货地址',
          })
          .then(() => {
          // on confirm
          this.request_addresslist_clear(this.addresslist[this.currentIndex].id);
          })
          .catch(() => {
          // on cancel

          });
          
        },
        save(){
          Dialog.confirm({
          title: '保存地址',
          message: '确定保存收货地址',
          })
          .then(() => {
          // on confirm
          this.$router.go(-1);
          })
          .catch(() => {
          // on cancel

          });
        }

    },
    mounted(){
        // this.request_addresslist_add(this.formData);
        // console.log(this.addresslist);
        
        eventbus.$on('deliverIndex',(index)=>{
          this.currentIndex = index;
          console.log(this.currentIndex);
          console.log(this.addresslist[this.currentIndex]);
        })
    }
}
</script>

<style lang="scss" scoped>
ul{
  margin-top: 60px;
}
input{
  border: none;
  display: inline-block;
  margin: 10px 5px;

}
.block{
  border-bottom:1px solid #f5f5f5 ;
  margin-bottom: 10px;
}
ul li button{
  width: 60px;
  margin: 0 10px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  border-radius: 5px;
}
span{
  font-size: 18px;
  margin-left: 5px;
  font-weight: bolder;
}
.del,.srue{
  width: 80px;
  height: 40px;
  margin-left: 34px;
}
</style>